<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
  /* field styles */
}

.InputAddOn-item {
  /* item styles */
}

</style>

</head>

<body>
    <!-- appending -->
    <div class="InputAddOn">
      <input class="InputAddOn-field">
      <button class="InputAddOn-item">…</button>
    </div>

    <!-- prepending -->
    <div class="InputAddOn">
      <span class="InputAddOn-item">…</span>
      <input class="InputAddOn-field">
    </div>

    <!-- both -->
    <div class="InputAddOn">
      <span class="InputAddOn-item">…</span>
      <input class="InputAddOn-field">
      <button class="InputAddOn-item">…</button>
    </div>
</body>

</html>